<template>
  <div class="questions-container">
    <el-card>
      <!-- 说明 + 新增试题 区域-->
      <div class="btn-wrap">
        <span class="text">说明：目前支持学科和关键字条件筛选</span>
        <el-button size="small" type="success" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </div>
      <!-- /说明 + 新增试题 区域 -->

      <!-- 搜索区域 -->
      <el-form :model="queryInfo" ref="searchFormRef" label-width="80px" size="small">
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="queryInfo.subjectID" @change="subjectChanged" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                  v-for="(item, index) in subjectsOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="queryInfo.catalogID" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                  v-for="(item, index) in directorysOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" size="small">
              <el-select v-model="queryInfo.tags" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                  v-for="(item, index) in tagsOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="queryInfo.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>

          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="queryInfo.questionType" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                  v-for="(item, index) in questionTypeOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="queryInfo.difficulty" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                  v-for="(item, index) in difficultyOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="queryInfo.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  :key="index"
                  v-for="(item, index) in directionOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="queryInfo.creatorID" placeholder="请选择">
                <el-option
                  :label="item.username"
                  :value="item.id"
                  :key="index"
                  v-for="(item, index) in creatorsOpt"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="queryInfo.remarks"></el-input>
            </el-form-item>
          </el-col>

          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="queryInfo.shortName"></el-input>
            </el-form-item>
          </el-col>

          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市" class="city">
              <!-- 城市 -->
              <el-select
                class="city-opt"
                v-model="queryInfo.province"
                placeholder="请选择"
                style="width: 48%; margin-right: 8px;"
                @change="onProvincesChanged"
              >
                <el-option
                  :label="item"
                  :value="item"
                  :key="index"
                  v-for="(item, index) in provincesOpt"
                ></el-option>
              </el-select>

              <!-- 地区 -->
              <el-select v-model="queryInfo.city" placeholder="请选择" style="width: 48%">
                <el-option
                  :label="item"
                  :value="item"
                  :key="index"
                  v-for="(item, index) in citysArea"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item align="right">
              <el-button type="plain" @click="resetForm">清除</el-button>
              <el-button type="primary" @click="loadQuestions">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- /搜索区域 -->

      <!-- 数据条数 -->
      <el-alert
        :title="`数据一共 ${ total } 条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      ></el-alert>
      <!-- /数据条数 -->

      <!-- 基础题库列表区域 -->
      <el-table :data="questionsList" border style="width: 100%">
        <el-table-column prop="number" label="试题编号" align="center" width="150"></el-table-column>
        <el-table-column prop="subject" label="学科" align="center" width="80"></el-table-column>
        <el-table-column prop="catalog" label="目录" align="center" width="80"></el-table-column>
        <el-table-column prop="questionType" label="题型" align="center" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" align="center">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" align="center" width="180">
          <template slot-scope="scope">{{ scope.row.addDate | formatDate }}</template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" align="center" width="70">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.questionType === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" align="center" width="100"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="预览"
              placement="top"
              :open-delay="500"
              :enterable="false"
            >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-view"
                plain
                circle
                @click="previewDialogShoew(scope.row)"
              ></el-button>
            </el-tooltip>

            <!-- 编辑 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
              :open-delay="500"
              :enterable="false"
            >
              <el-button
                size="small"
                type="success"
                icon="el-icon-edit"
                plain
                circle
                @click="$router.push(`new?id=${scope.row.id}`)"
              ></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              :open-delay="500"
              :enterable="false"
            >
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="removeQuestionById(scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 加入精选 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="加入精选"
              placement="top"
              :open-delay="500"
              :enterable="false"
            >
              <el-button
                size="small"
                type="warning"
                icon="el-icon-check"
                plain
                circle
                @click="onChoiceAdd(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- /基础题库列表区域 -->

      <!-- 分页区域 -->
      <pagination :queryInfo="queryInfo" :total="total" @pagination="loadQuestions" />

      <!-- 题目预览弹出框 -->
      <el-dialog
        v-if="previewDialogVisible"
        title="题目预览"
        :visible.sync="previewDialogVisible"
        width="900px"
        top="10vh"
      >
        <questions-preview :item="info"></questions-preview>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="previewDialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 学科相关请求模块
import { simple as getSubjects } from '@/api/hmmm/subjects'
// 目录相关请求模块
import { simple as getDirectorys } from '@/api/hmmm/directorys'
// 标签相关请求模块
import { simple as getTags } from '@/api/hmmm/tags'
// 试题类型、难度、方向 等相关模块
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 用户相关请求模块
import { simple as getUsers } from '@/api/base/users'
// 城市相关模块
import { provinces, citys } from '@/api/hmmm/citys'
// 题库相关请求模块
import { list as getQuestions, remove, choiceAdd } from '@/api/hmmm/questions'

import Pagination from '@/components/Pagination'
import questionsPreview from '../components/questions-preview.vue'
export default {
  name: 'Questions',
  data() {
    return {
      // 查询参数
      queryInfo: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      subjectsOpt: [], // 学科列表
      directorysOpt: [], // 目录列表
      tagsOpt: [], // 标签列表
      questionTypeOpt: questionType, // 试题类型列表
      difficultyOpt: difficulty, // 难度列表
      directionOpt: direction, // 方向列表
      creatorsOpt: [], // 录入人列表
      provincesOpt: provinces(), // 城市列表
      citys,
      citysArea: [],
      total: 0, // 数据总条数
      questionsList: [], // 基础题库列表
      // 题目预览弹出框显示与隐藏
      previewDialogVisible: false,
      info: {} // 传入弹框的数据
    }
  },
  created() {
    // 获取学科列表
    this.loadSubjects()

    // 获取用户列表
    this.loadUsers()

    // 获取基础题库列表
    this.loadQuestions()
  },
  methods: {
    // 获取学科列表
    async loadSubjects() {
      try {
        const { data: res } = await getSubjects()
        // console.log(res)
        this.subjectsOpt = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 学科下拉框选中项改变时触发
    subjectChanged(subjectID) {
      // 目录列表
      this.loadDirectorys({ subjectID })

      // 标签列表
      this.loadTags({ subjectID })
    },

    // 获取二级目录
    async loadDirectorys({ subjectID }) {
      try {
        const { data: res } = await getDirectorys({ subjectID })
        this.directorysOpt = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 获取标签列表
    async loadTags({ subjectID }) {
      try {
        const { data: res } = await getTags({ subjectID })
        this.tagsOpt = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 获取用户列表
    async loadUsers() {
      try {
        const { data: res } = await getUsers()
        this.creatorsOpt = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 城市选择下拉框选中项发生变化时触发
    onProvincesChanged(city) {
      this.citysArea = citys(city)
    },

    // 点击清除按钮清空表单
    resetForm() {
      for (const key in this.queryInfo) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.queryInfo[key] = null
      }
      this.loadQuestions()
    },

    // 获取基础题库列表
    async loadQuestions() {
      try {
        const { data: res } = await getQuestions(this.queryInfo)
        this.questionsList = res.items
        this.total = res.counts
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },

    // 根据ID删除指定基础题目
    async removeQuestionById(row) {
      const confirmResults = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)

      if (confirmResults !== 'confirm') return this.$message.info('取消了删除')

      try {
        await remove(row)
        this.loadQuestions()
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.error('操作失败')
      }
    },

    // 加入精品题库
    async onChoiceAdd(row) {
      const confirmResults = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)

      if (confirmResults !== 'confirm') return this.$message.info('取消了删除')

      try {
        await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        this.loadQuestions()
        this.$message.success('加入精选成功')
      } catch (error) {
        console.log('操作失败')
      }
    },

    // 题目预览弹出框
    previewDialogShoew(item) {
      this.previewDialogVisible = true
      this.info = item
    }
  },
  components: {
    Pagination,
    questionsPreview
  }
}
</script>

<style scoped lang='scss'>
.questions-container {
  padding: 10px;
  .btn-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .text {
      font-size: 12px;
      color: pink;
    }
  }

  .el-select {
    width: 100%;
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
